<template>
  <div class="index">
    <div class="index_top">
      <el-aside width="250px">
        <my-aside></my-aside>
      </el-aside>
      <el-main id="el_main">
        <router-view></router-view>
      </el-main>
    </div>
    <div class="footer">
      <my-audio></my-audio>
    </div>
  </div>
</template>
<script>
import MyAudio from "./components/MyAudio"
import MyAside from "./components/MyAside"
export default {
  data() {
    return {}
  },
  components: {
    MyAside,
    MyAudio,
  },
}
</script>
<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  .index_top {
    height: calc(100% - 50px);
    width: 100%;
    display: flex;
    .el-main {
      background-color: #ffffff;
      color: #333;
      text-align: center;
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow-y: scroll;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    .el-main::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
      border-radius: 10px;
      background-color: #f5f5f5;
      opacity: 0;
    }

    /*定义滑块 内阴影+圆角*/
    .el-main::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: rgb(216, 215, 215);
    }
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    .el-main::-webkit-scrollbar {
      width: 6px;
      background-color: #f5f5f5;
    }
  }

  .footer {
    width: 100%;
    text-align: center;
    line-height: 50px;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
</style>
